<template>
  <footer class="w-full text-left -mt-6">
    <div class="w-100 enter-x">
      <a-divider>其他登录方式</a-divider>
    </div>
    <ul class="w-100 flex justify-center gap-13">
      <li class="footer-icon enter-x">
        <github-outlined />
      </li>
      <li class="footer-icon enter-x">
        <wechat-outlined />
      </li>
      <li class="footer-icon enter-x">
        <qq-outlined />
      </li>
      <li class="footer-icon enter-x">
        <alipay-circle-outlined />
      </li>
      <li class="footer-icon enter-x">
        <twitter-outlined />
      </li>
    </ul>
  </footer>
</template>

<script setup lang="ts">
  import {
    GithubOutlined,
    WechatOutlined,
    QqOutlined,
    AlipayCircleOutlined,
    TwitterOutlined,
  } from '@ant-design/icons-vue';
</script>

<style scoped>
  .footer-icon {
    @apply text-2xl text-[#888888] cursor-pointer hover:text-blue-600;
  }
</style>
